<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in banner" :key="item.pid">
        <img :src="item.bannerImg" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    banner: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        loop: {
          loop: true,
        },
        autoplay: {
          delay: 2000, // 时间 毫秒
          disableOnInteraction: false, // 用户操作之后是否停止自动轮播默认true
        },
        slidesPerView: 1,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  padding: 0;
  margin: 0;
  .swiper-slide {
    height: 200px;
    overflow: hidden;
  }
  img {
    width: 100%;
    height: 130%;
  }
}
</style>